/* Uploader */
div.uploader {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: default;
    height: 28px;
    line-height: 28px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.has-error div.uploader {
    border-color: #a94442;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

div.uploader span.action {
    float: right;
    position: relative;
    padding: 0 5px;
    display: inline;
    overflow: hidden;
    cursor: pointer;
    width: 40%;
    text-align: center;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #ccc;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom, #F8F8F8 0px, #ECECEC 100%) repeat-x scroll 0 0 #F2F2F2;
}

div.uploader span.filename {
    padding: 0 10px;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    position: relative;
    width: 60%;
    color: rgb(179, 179, 179);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .15);
}

div.uploader input {
    opacity: 0;
    filter: alpha(opacity:0);
    position: absolute;
    width: inherit;
    height: inherit;
    float: right;
    border: none;
    cursor: pointer;
    z-index: 1;
}

div.uploader input:hover ~ .action {
    background: linear-gradient(to bottom, #ECECEC 100%, #F8F8F8 0px) repeat-x scroll 0 0 #F2F2F2;
}